<template>
  <!-- 1.设计阶段 -->
  <multipane :style="{ height }" class="x-render-table">
    <!-- 中间 -->
    <slot name="main" :xRenderTable="this">
      <x-table-main @save="saveHandler"/>
    </slot>
    <multipane-resizer/>
    <!-- 右侧 -->
    <slot name="right" :xRenderTable="this">
      <x-table-right/>
    </slot>

  </multipane>
</template>

<script>

// 组件
import XTableMain from './components/table/main/index'
import XTableRight from './components/table/right/index'
import Multipane from './components/multipane/Multipane'
import MultipaneResizer from './components/multipane/MultipaneResizer'

// 工具函数
import {cloneDeep, isPlainObject, omitBy} from 'lodash'

import serialize from 'serialize-javascript'
import {getTableColumnOption} from './libs/utils'

// 组件的数据，通过 provide / inject 的形式传递给子组件
// 主要原因是因为组件嵌套过深，相当于一个状态管理
export default {
  name: 'XTable',
  components: {
    Multipane,
    MultipaneResizer,
    XTableRight,
    XTableMain
  },
  inheritAttrs: false,
  provide() {
    return {
      xDesignTable: this
    }
  },
  props: {
    // 表单内容
    config: {
      type: String,
      default() {
        return ''
      }
    },
    // 设计器整体高度
    height: {
      type: [String, Number],
      default: '400px'
    },
    // 保存格式
    saveFormat: {
      type: String,
      default: 'string',
      validator(val) {
        return ['object', 'string'].includes(val)
      }
    },
    // 操作配置
    operations: {
      type: Array,
      default: () => ['preview', 'data', 'code', 'batch', 'clear', 'save']
    },
    // 右侧属性面板 Tabs
    rightTabs: {
      type: Array,
      default: () => [
        {
          label: '列属性', name: 'x-render-table-column-attrs', show: (xDesignTable) => {
            const currentOption = xDesignTable.currentOption
            return currentOption && !currentOption.isGroup
          }
        },
        {
          label: '列组属性', name: 'x-render-table-column-group-attrs', show: (xDesignTable) => {
            const currentOption = xDesignTable.currentOption
            return currentOption && !!currentOption.isGroup
          }
        },
        {label: '表格配置', name: 'x-render-table-props', show: true}
      ],
      validator(tabs) {
        return (tabs || []).every(item => item.label && item.name)
      }
    },
    // 表单相关（designer 为 true 时）
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 主界面进行loading
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表格数据
      tableData: {},
      // 定义表格属性数据
      tablePropsData: {
        rowKey: 'index',
        bordered: true,
        isSelect: true,
        selectIsFixed: false,
        selectType: 'checkbox',
        page: true,
        pagination: {
          // 当前页
          current: 1,
          // 当前页的数据个数
          pageSize: 10,
          // 数据格式配置
          pageSizeOptions: ['10', '20', '30', '40'],
          // 数据总数量
          total: 20
        },
        scroll: {
          x: '100%',
          y: '100%'
        }
      },
      // 表格项数组形态
      tableColumnOptions: [
        {
          id: '1',
          title: '序号',
          dataIndex: 'index'
        }
      ],
      dataSource: [
        {
          index: 1
        }
      ],
      tableBtns: [],
      // 当前 column的 id 值
      currentId: '1',
      // 当前 column option
      currentOption: null,
      //  当前 form btn 的 index 值
      currentBtnIndex: 0,
      // 按钮表单展示
      btnFormShow: false,
      // 按钮表单是否是新增
      btnFormAdd: true
    }
  },
  watch: {
    config: {
      immediate: true,
      deep: true,
      handler(config) {
        // 判断是否有值
        if (!config) return
        let tableConfig = cloneDeep(config)
        // 如果是字符串，则转为对象
        if (typeof config === 'string') {
          try {
            // 有可能解析出错
            tableConfig = tableConfig ? (new Function('return ' + tableConfig))() : {}
            if (!isPlainObject(tableConfig)) {
              // 如果不是对象，则也抛出遗产
              throw new TypeError('config 不是对象')
            }
          } catch (err) {
            this.$message.error('数据解析失败')
            console.error(err)
            return
          }
        }

        if (!isPlainObject(tableConfig)) {
          // 如果不是对象，则也抛出异常
          console.error('[x-table]: config 不是对象', tableConfig)
          return
        }

        const {tableProps, columns} = cloneDeep(tableConfig)
        // 赋值操作
        this.tablePropsData = Object.assign(this.tablePropsData, tableProps)
        this.tableColumnOptions.splice(0, this.tableColumnOptions.length, ...columns)

        // 当有数据时，选中第一个
        if (this.formOptions.length !== 0) {
          this.currentIndex = 0
        }
      }
    },
    currentId: {
      immediate: true,
      deep: true,
      handler(val) {
        this.currentOption = getTableColumnOption(this.tableColumnOptions, val)
      }
    }
  },
  created() {
    // 设置表格属性默认值
    this.initTableProps()

    // 防止火狐拖拽打开新标签
    this.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }

    document.body.addEventListener('drop', this.ondrop)
  },
  beforeDestroy() {
    document.body.removeEventListener('drop', this.ondrop)
  },
  methods: {
    /**
     * 移除无用的属性
     */
    removeEmptyProps(obj = {}) {
      return omitBy(obj, val => val === undefined || val === null || val === '')
    },
    // 保存数据
    saveHandler() {
      // 根据用户传入的保存格式进行判断
      if (this.saveFormat === 'string') {
        this.$emit('save', this.getTableConfigStr())
      } else {
        this.$emit('save', this.getTableConfig())
      }
    },
    // 获取序列化后的表单配置
    getTableConfigStr() {
      return serialize(this.getTableConfig(), {space: 2})
    },
    // 获取表单配置
    getTableConfig() {
      return {
        // 表单属性
        tableProps: this.removeEmptyProps(cloneDeep(this.tablePropsData)),
        // 表格按钮
        tableBtns: cloneDeep(this.tableBtns),
        // 表单项
        columns: cloneDeep(this.tableColumnOptions)
      }
    },
    // 设置表格属性默认值
    initTableProps() {
      this.tablePropsData = Object.assign(
        this.tablePropsData
      )
    }
  }
}
</script>

<style lang="css" scoped>
/* x-render-table 整体样式 */
.x-render-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 15px;
  border: 1px solid #ebeef5;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 左右面板拖动的抓手 */
.x-render-table > .multipane-resizer {
  margin: 0;
  left: 0;
  position: relative;
  box-sizing: border-box;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  width: 7px;
}

.x-render-table > .multipane-resizer::before {
  display: block;
  content: "";
  width: 1px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -1.5px;
  box-sizing: border-box;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

.x-render-table > .multipane-resizer::before::before {
  border-color: #999;
}


*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  cursor: pointer;
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: rgba(64, 158, 255, .9);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 10px;
}
</style>
